<template>
    <div class="shop-container">
      <!-- 顶部子导航 -->
      <el-menu
        :default-active="$route.path"
        mode="horizontal"
        class="sub-menu"
        @select="handleSubSelect"
      >
        <el-menu-item index="/shop/products">商品列表</el-menu-item>
        <el-menu-item index="/shop/cart">购物车</el-menu-item>
      </el-menu>
  
      <!-- 内容区域 -->
      <router-view class="content-area" />
  
      <!-- 底部固定操作栏 -->
      <div class="footer-bar">
        <el-button type="text" @click="$router.back()">返回</el-button>
        <span>当前位置：{{ $route.name }}</span>
      </div>
    </div>
  </template>
  
  <script setup>
  import { useRouter } from 'vue-router'
  
  const router = useRouter()
  
  // const handleSubSelect = (key: string) => {
  //   router.push(key).catch(err => {
  //     if (!err.message.includes('Avoided redundant navigation')) throw err
  //   })
  // }
  </script>
  
  <style scoped>
  .shop-container {
    padding: 20px;
  }
  
  .sub-menu {
    margin: 20px 0;
    border-bottom: 2px solid #f5f7fa;
  }
  
  .footer-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px;
    background: white;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    z-index: 1000;
  }
  </style>